From 916c512bf5a31041ac87296e1382f84c9367b955 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 14 Feb 2022 17:16:53 +0100
Subject: chore: display initial posts, thematics & topics

By fetching the data in getStaticProps, I can display the data even
for users with Javascript disabled.
---
 src/pages/thematique/[slug].tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/pages/thematique/[slug].tsx')

diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 166e0bb..d737ea7 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -5,6 +5,7 @@ import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { RelatedTopics, ThematicsList, ToC } from '@components/Widgets';
 import {
+  getAllThematics,
   getAllThematicsSlug,
   getThematicBySlug,
 } from '@services/graphql/queries';
@@ -23,7 +24,10 @@ import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
-const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
+const Thematic: NextPageWithLayout<ThematicProps> = ({
+  thematic,
+  allThematics,
+}) => {
   const intl = useIntl();
   const relatedTopics = useRef<TopicPreview[]>([]);
   const router = useRouter();
@@ -151,6 +155,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
         >
           <RelatedTopics topics={relatedTopics.current} />
           <ThematicsList
+            initialData={allThematics}
             title={intl.formatMessage({
               defaultMessage: 'Others thematics',
               description: 'ThematicPage: thematics list widget title',
@@ -175,10 +180,12 @@ export const getStaticProps: GetStaticProps = async (
   const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const thematic = await getThematicBySlug(slug);
+  const allThematics = await getAllThematics();
   const breadcrumbTitle = thematic.title;
 
   return {
     props: {
+      allThematics,
       breadcrumbTitle,
       locale,
       thematic,
-- 
cgit v1.2.3